import React, { Fragment } from "react"
import Boil from "./boil"
import TemperatureInput from "./temperatureInput"
import tryConvert from "./utils"



class Calculator extends React.Component {
    state = {
        temperature: "",
        scale: "c"
    }
    handleC = (tem) => {
        this.setState({
            temperature: tem,
            scale: "c"
        })
    }
    handleF = (tem) => {
        this.setState({
            temperature: tem,
            scale: "f"
        })
    }
    render() {
        let {scale,temperature}=this.state
        let celsius=scale==="c"?temperature:tryConvert(temperature,"toCelsius")
        let fahrenheit=scale==="f"?temperature:tryConvert(temperature,"toFahrenheit")
        return (
            <Fragment>
                <TemperatureInput scale="c" onChange={this.handleC} temperature={celsius}/>
                <TemperatureInput scale="f" onChange={this.handleF} temperature={fahrenheit}/>
                <Boil temperature={celsius}></Boil>
            </Fragment>
        )
    }
}
export default Calculator